<template>
  <el-dialog :before-close="handleClose"
             :close-on-click-modal="false"
             :visible="activationDialogVisible"
             title="会员激活"
             width="70%"
             @close="handleClose"
             @open="handleOpen">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">会员手工激活</span>
        <el-button icon="el-icon-refresh" style="float: right; margin-right: 10px" type="primary"
                   @click="getMemberList">
          刷新
        </el-button>
        <el-input v-model="openidToFilter" clearable placeholder="扫描会员码或输入手机号"
                  style="width: 30%;float: right;margin-right: 10px;"></el-input>
      </div>
      <el-table :data="tableData" border height="400" stripe style="width: 100%;">
        <el-table-column align="center" label="会员Id" prop="id" width="80"></el-table-column>
        <el-table-column align="center" label="会员名称" prop="nickName" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="会员码" prop="openid" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
        <el-table-column align="center" label="关注时间" prop="registrationDate"></el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button v-show="!scope.row.phone" icon="el-icon-s-custom" size="small" type="warning"
                       @click="handleActivation(scope.row)">激活
            </el-button>
            <el-button v-show="scope.row.phone" icon="el-icon-s-custom" size="small" type="success"
                       @click="agreeAuditActivation(scope.row)">同意
            </el-button>
            <el-button v-show="scope.row.phone" icon="el-icon-s-custom" size="small" type="danger"
                       @click="refuseAuditActivation(scope.row)">拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="memberListAfterFilter.length"
                       layout="total, prev, pager, next" @prev-click="handlePrevClick" @next-click="handleNextClick"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import {activateMember, getNotActiveMembers, removeAuditMember} from '@/api/member'

export default {
  name: 'ActivationDialog',
  data () {
    return {
      reportData: {},
      memberList: [],
      currentPage: 1,
      openidToFilter: '',
      auditMemberList: [] // 待审核会员列表
    }
  },
  computed: {
    ...mapGetters([
      'shiftInfo',
      'stationName',
      'stationId',
      'activationDialogVisible',
      'pageSize'
    ]),
    memberListAfterFilter () {
      console.log(this.openidToFilter)
      var temp = this.memberList
      temp = temp.filter(item => {
        return item.openid.indexOf(this.openidToFilter) > -1 || (item.phone && item.phone.indexOf(this.openidToFilter) > -1)
      })
      if (temp.length > 1) {
        temp = temp.sort(function (a, b) {
          return b.phone - a.phone
        })
        temp = temp.sort(function (a, b) {
          return new Date(b.registrationDate) - new Date(a.registrationDate)
        })
      }
      return temp
    },
    tableData () {
      if (this.currentPage * this.pageSize > this.memberListAfterFilter.length) {
        return this.memberListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.memberListAfterFilter.length)
      } else {
        return this.memberListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
      }
    }

  },
  mounted () {
  },
  methods: {
    handleClose () {
      this.$store.dispatch('hideActivationDialog')
    },
    handleOpen () {
      this.getMemberList()
      this.openidToFilter = ''
      this.$store.dispatch('showActivationDialog')
    },
    getMemberList () {
      // 获取未激活会员列表
      getNotActiveMembers().then(res => {
        console.log('getNotActiveMembers')
        console.log(res)
        this.memberList = res.data
      })
    },
    handleActivation (rowData) {
      console.log('handleActivation')
      console.log(rowData)
      this.$prompt('请输入电话号码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'number',
        inputErrorMessage: '电话号码格式不正确'
      }).then(({value}) => {
        activateMember({
          openid: rowData.openid,
          stationId: this.stationId,
          phone: value
        }).then(res => {
          console.log(res)
          this.$message.success(res.msg || '会员激活成功！')
          setTimeout(() => {
            this.getMemberList()
          }, 1000)
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        console.log('cancel')
      })
    },
    agreeAuditActivation (rowData) {
      console.log('agreeAuditActivation')
      console.log(rowData)
      this.$confirm('是否要同意激活？', '同意审批', {type: 'warning'}).then(() => {
        activateMember({
          openid: rowData.openid,
          stationId: this.stationId,
          phone: rowData.phone
        }).then(res => {
          console.log(res)
          this.$message.success(res.msg || '会员激活成功！')
          setTimeout(() => {
            this.getMemberList()
          }, 3000)
        }).catch(res => {
          this.$message.warning(res)
          setTimeout(() => {
            this.getMemberList()
          }, 1000)
        })
      })
        .catch(cancel => {
          console.log(cancel)
        })
    },
    refuseAuditActivation (rowData) {
      console.log('refuseAuditActivation')
      console.log(rowData)
      this.$confirm('是否要拒绝激活？', '拒绝审批', {type: 'warning'}).then(() => {
        removeAuditMember({
          id: rowData.id
        }).then(res => {
          console.log(res)
          this.$message.warning(res.msg || '已成功拒绝')
          setTimeout(() => {
            this.getMemberList()
          }, 1000)
        }).catch(res => {
          this.$message.warning(res)
          setTimeout(() => {
            this.getMemberList()
          }, 1000)
        })
      })
        .catch(cancel => {
          console.log(cancel)
        })
    },
    handlePrevClick (page) {
      this.currentPage = page
    },
    handleNextClick (page) {
      this.currentPage = page
    },
    handleCurrentChange (page) {
      this.currentPage = page
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: 0 auto;
  overflow-y: auto;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.title {
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
}

.pager {
  width: 100%;
  text-align: center;
  background: white;
}
</style>
